.header{ width: 100%;
         height: 82px; 
         position: fixed;
         top:0;
         z-index: 12;
        }
.header .logo{ float: left;
               margin-left: 20px;}
.header ul{ width: 600px;
            height: 82px;
            margin: 0 auto ; }   
.header ol{ position: fixed; 
            z-index: 9999;
            right:-200px; 
            top:0;   
            width: 200px;
            height: 100%;
            background: #2a81d0;
            opacity: 0.8;
            text-align: center;
            font-size: 15px;
            transition: 0.6s all;
        }

    
.header ol li{ line-height: 45px;
                border: solid 1px rgb(98, 98, 235)}
.header ol li a{ color: #ccc}
.header ol li.on a{ color: #fff}
.header ol li:hover a{ color: #fff}

.header ul li{  float: left;
                padding: 0 10px; 
                line-height: 82px;
                border-top: #257Dff solid 2px;
            }
.header ul li.active{border-top: #fff solid 2px;}        
.header ul li:hover{ border-top: #fff solid 2px;}
.header ul li a{ color: #fff;}
.header .mobileMenuBtn{ display: none; 
                        position: fixed;
                        z-index: 9999;
                        right: 20px;
                        top:20px;
                        transition: 0.4s all;
                       -webkit-transition: 0.4s all;
                    }

.header .mobileMenuBtn span{
    width: 32px;
    height: 3px;
    background: #fff;
    display: block;
    margin-bottom: 8px;
    transition: 0.3s all;
   
}
.header .mobileMenuBtn span:first-child,.header .mobileMenuBtn span:last-child{
    transform: rotate(0);
    -webkit-transform: rotate(0);
    transform-origin: 100% 50%;
}
.header .mobileMenuBtn span:nth-child(2){
    transform:translate(0);
    -webkit-transform:translate(0);
}
.header .mobileMenuBtn.active span:first-child{
    transform: rotate(-43deg);
    -webkit-transform: rotate(-43deg);
}
.header .mobileMenuBtn.active span:nth-child(2){
    transform: translate(80px);
    -webkit-transform: translateX(80px);
    opacity: 0;
}
.header .mobileMenuBtn.active span:last-child{
    transform: rotate(43deg);
    -webkit-transform: rotate(43deg);
}

.mobileMenuBtn_shad{
    width: 100%;
    height: 0;
    position: fixed;
    top:50%;
    left:50%;
    z-index: 9997;
    background: rgba(0, 0, 0, 0.7);
    transition: 0.4s all;
    transform: translate(-50%,-50%);
}

.banner{ width: 100%;
         height: 800px;
         background:url(../img/bg-new.png);
         z-index: 10;
         text-align: center;
         position: relative;
         
}
    
.banner .swiper-container { position: absolute; 
                            top:280px;
                            width: 100%; 
                            height:508px;}
.banner .swiper-slide h1{
    font-size: 60px;
    color: #fff;
}
.banner .swiper-slide p{
    color: #9ad0ff;
}
.banner .swiper-slide a{
    display: block;
    width:118px;
    height: 33px;
    border:solid 1px #fff; 
    margin: 20px auto 0;
    line-height: 33px;
    color: #fff;

}

.banner .swiper-slide a.ty{
    background: #fff;
    color: #3ca0f3;
}
.banner .swiper-pagination-bullets{
     bottom: 160px;
}
.banner .swiper-pagination-bullet{
    width: 12px;
    height: 12px;
    background: #fff;
    border: solid 1px #fff;
    opacity:0.3;
}
.banner .swiper-pagination-bullet-active{
    background: transparent;
    border: solid 1px #fff;
    opacity: 1;
}

.aside {position: fixed;
        right: 0px;
        top: 0px;
        width: 40px;
        height: 100%;        
        background: url(../img/aside.jpg) no-repeat;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        z-index: 9998;
        text-align: center;
        color: #fff;}
.aside .hezuo{ margin-top: 100px ; }
.aside .hezuo ,.aside .zx, .aside .help{ height: 60px; }
.aside .zx{ margin-bottom: 25px;}
.aside .zx span{
    width: 5px;
    height: 5px;
    display: inline-block;
    border-radius: 100%;
    background: #fff;
    margin-bottom: -4px;
}
.aside .zx span:nth-child(1){
    animation: yundong  0.6s  0.07s infinite ease-in-out ;
}
.aside .zx span:nth-child(2){
    animation: yundong  0.6s  0.14s infinite ease-in-out ;
}
.aside .zx span:nth-child(3){
    animation: yundong  0.6s  0.21s infinite ease-in-out ;
}
@keyframes yundong{
    33%{
        transform: translateY(5px);
    }
    66%{
        transform: translateY(-5px);
    }
    100%{
        transform: translateY(0);
    }
}
.aside .Top{  position: fixed; 
              width: 40px;
              height: 40px;
              line-height: 40px;
              padding-top: 10px;
              right: 0;
              bottom:60px;
              background: url(../img/right-menu-icons.png) no-repeat 57% -12%;
              transition: 0.4s all;  }
.aside .Top:hover{
    background: #fff url(../img/right-menu-icons.png) no-repeat 57% 120%;
    color:  #2792F0;
}
.aside .close{ position: fixed; 
               width: 40px;
               height: 40px;
               bottom:20px; 
               right: 0;
               background: url(../img/right-menu-icons.png) no-repeat -776px -15%;
               transition: all 0.4s;}

.aside .close:hover{
    background: #fff  url(../img/right-menu-icons.png) no-repeat -776px -93px;
    
}            
.product{  width: 96%; 
           margin: 100px auto;
           text-align: center;  } 
.product .title{ margin-bottom:50px ;} 
.product .title h1{ font-size: 35px;}
.product .ww{ position: relative;
              width: 97%; 
              height: 138px; 
              overflow: hidden;
              margin:0 0 10px 10px; }
.product .one .ww{ background: url(../img/002.png) no-repeat } 
.product .two .ww{ background: url(../img/003.png) no-repeat }      
.product .three .ww{ background: url(../img/004.png) no-repeat }
.product .four .ww{ background: url(../img/005.png) no-repeat } 
.product .five .ww{ background: url(../img/006.png) no-repeat }      
.product .six .ww{ background: url(../img/007.png) no-repeat }
.product  img{ margin: 20px 0 5px 0;}
/*两次闪光效果*/
.product .ww:before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%; 
	height: 100%;
	background: rgba(255, 255, 255, 0.4);
	content: '';
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	-webkit-transform: scale3d(2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -140%, 0);
	transform: scale3d(2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -140%, 0);
}
.product .ww:hover:before {
	-webkit-transform: scale3d(2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 140%, 0);
	transform: scale3d(2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 140%, 0);
}
/*一次闪光效果*/
/*.product ul li:hover:before{
	transition:left 0.5s;  
    left:390px;
    
}
.product ul li:before{
            content: '';
            position: absolute;
            width: 120px;
            height: 325px;background-image: linear-gradient()
            top: 0;
            left: -230px;           
            background-image: linear-gradient(to right,rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 50%,rgba(255,255,255,.2) 100%);
            transform: skewX(-30deg);	
}*/



.youshi{ background:#fff url(../img/01411.jpg) repeat-x center top;
         padding-top: 100px;
         text-align: center;
         margin-top: 100px;
         color: #fff;
         }
 .caption{ margin-bottom: 50px;}
 .caption h1{ font-size: 35px;}
.youshi .kind{  width: 96%; margin: 0 auto; }
.youshi .span4 .ee{ text-align: left; height: 127px; width: 97%;}       
.youshi .span4 img {float: left;  margin-right: 30px;}
.youshi .span4 h2{ font-size: 18px;}
.youshi .span4 p{ font-size: 13px;}
.lunbo{ width: 100%;
        padding-left: 2%;
        overflow: hidden}
.proshow1 { text-align: left;
            max-width: 73%;
            position: relative;}
.proshow1 .big,.proshow2 .middle,.proshow3 .small{ 
                width: 100%;
                height: 100%;}
.proshow1 .img1{    position: absolute; 
                    left: 2%;
                    top: 2.4%;
                    max-width: 96.5%; 
                    height: 77.6%; 
                    overflow: hidden;}   
.proshow1 .show1 img,.proshow2 .show2 img,.proshow3 .show3 img
{width:100%; height:100%;}

.proshow2{ width: 53%;
           position: absolute; 
           bottom: 2%;
           right: -32%;
        }
        
.proshow2 .img2{
    position: absolute;
    left:2%;
    top:3%;
    width: 96.5%;
    height: 90.6%;
    overflow: hidden;
}            
.proshow3 {
           width:20%;
           position: absolute;
           right:18%; 
           bottom: 0;
        }
.proshow3  .img3{
    width:89%;
    height: 83.8%;
    position: absolute;
    top:6%;
    left:4.8%;
    overflow: hidden;
}


.fenyeqi{ margin:50px auto;}
.fenyeqi span{ width: 14px;
               height: 14px;
               display: inline-block;
               margin-left: 10px;
               border-radius: 100%;
               border: solid 1px #379ddb;
              
               }
.fenyeqi span.active{background: #379ddb }
.market{ 
    width: 100%; 
    padding:100px 0;
    background: url(../img/0181.jpg) center top repeat;
}
.market .caption{color: #fff;
                 text-align: center;
                 margin-bottom: 50px;}
.market .kind{width: 98%;
              margin: 0 auto;
              text-align: left;
             }
.market .a1 ,.market .one {
    width:96%;}
.market .a2{ width: 100%}   
.market .kind  .a1{ transition: .5s;}
.market .kind  .one{transition: .5s;
                    position: relative;  
                    }

.market .kind .one div{
    position: absolute;
    top:30%; 
    left: 10%;
    width: 80%;
} 
               
.market .kind .one  p{font-size: 16px;
                      color: #606060;
                     }
.market .kind .one  p img{ vertical-align: bottom; margin-left: 5%;}
.market .kind .one span{font-size: 12px;
                        color:#a5a5a5;
                        display: block;
                        
                       }
.market .kind .one:hover,.market .kind  .a1:hover{
    transform: translateY(-10px);
    box-shadow: 5px 10px 30px #555;
}
.market .kind .one:hover span{color: #333; } 
.partner{ width: 96%;
          max-width: 1200px;
          margin: 100px auto;
          text-align: center;}
.partner img{ display: inline-block;
              width: 214px;
              height: 92px;
              margin: 10px;
              border:#eee solid 1px;
              transition: all .3s; 
            }
.partner img:hover{
    box-shadow: 2px 15px 20px rgba(0, 0, 0, 0.1);
   
}
.zxgg{ width:100%;
       padding :100px 0;
       background: url(../img/033.jpg) center top repeat;
       text-align: center;
       color: #fff; }
.zxgg h1{ font-size: 36px;}
.zxgg h1 span{ color: #31b5ff}
.zxgg p{ font-size: 18px;
         color: #e3e3e3;
         margin: 15px 0 50px 0;}
.zxgg em{ font-style: normal;
          display: block;
          border-radius: 5px; 
          width: 180px;
          height: 35px;
          line-height: 35px;
          margin: 0 auto;
          background: #3B9FF2;
          border: solid 1px #3B9FF2}
.zxgg em:hover{ background: transparent;}
.news{ width: 98%;
       max-width: 1200px;
       margin: 100px auto}
.news .caption{ text-align: center; margin-bottom: 30px;}
.news .caption p{ color: #666}
.news .left,.news .middle, .news .right {
    width:92%; 
    overflow: hidden;
}
.news img{ width: 100%;
           transition: .3s;
        }
.news img:hover{
    transform: scale(1.1);
}
.news h2{ margin: 15px 0;
          font-size: 16px;}
.news li  { width:97%;
            white-space: nowrap;
            text-overflow: ellipsis; 
            overflow: hidden;
            color: #767676;
            font-size: 12px;
            line-height: 30px;
            padding-left: 10px;
            background: url(../img/056.png) no-repeat left}
.news li a{ transition: all .2s;
            display: inline-block;
            color:#767676;}
.news li span{ float: right;
               color:#bbb}
.news li a:hover{
    transform: translateX(15px);
    color: #333;}
.foot{ background: url(../img/0371.jpg) center top repeat;
       width: 100%; }
.foot .container{   width:98%;
                    max-width: 1200px;
                    padding: 50px 0 ;
                    margin: 0 auto;
                }

.foot .one,.foot .two,.foot .three,.foot .four{ float: left;margin-left: 5%;}
.foot h1{ font-size:16px;  color: #fff;}
.foot  a,.foot .four{  color:#666;}
.foot  .two{ line-height: 30px;}
.foot  .two a:hover{color:#fff}
.foot .three li{ float:left;
                 padding:5px 10px;
                 background: #292929;
                 color: #8A8A8A;
                 margin:10px  1px;}
.foot .three li:hover{ opacity: 0.7;}
.foot .three li:hover a{color:#fff  }



.copy{  font-size: 12px;
        text-align: center;
        margin-top: 20px;
        background: #000;
        color: #8a8a8a; 
        line-height: 30px;
        }
.about-banner{
   width: 100%;
    background: url(../img/0555.jpg) center top repeat;
    position: relative;
}
.about-banner .container{
    width: 96%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: 170px 0;
}
.about-banner .container h1{
    font-size: 35px;
    color:#fff;
}
.about-banner .container p{
    font-size: 15px;
    color: #ccc;
}
.about-banner li{
    position: absolute;
    bottom: -200px;
    width: 40px; 
    height: 40px;
    background: rgba(255, 255, 255, 0.4);
    animation: square 20s infinite linear;
}
.about-banner li:nth-child(1){
    left: 10%;
}
.about-banner li:nth-child(2){
    left: 60%;
	width: 80px;
	height: 80px;
	animation-delay: 8s;
    animation-duration: 17s;
    background-color: rgba(255, 255, 255, .25)
}
.about-banner li:nth-child(3){
    left: 30%;
	width: 15px;
	height: 15px;
	animation-delay: 2s;
    animation-duration: 13s;
}
.about-banner li:nth-child(4){
    right: 18%;
    background: rgba(255, 255, 255, 0.15);
    animation-duration: 15s;
    animation-delay: 3s;
}
.about-banner li:nth-child(5){
    right: 80%;
    width: 50px;
    height: 45px;
    background: rgba(255, 255, 255, 0.25);
    animation-duration: 13s;
    animation-delay: 4s;
}
.about-banner li:nth-child(5){
    right: 55%;
    width: 60px;
	height: 60px;
    background: rgba(255, 255, 255, 0.25);
    animation-duration: 12s;
    animation-delay: 10s;
}
.about-banner li:nth-child(6){
    right: 65%;
    background: rgba(255, 255, 255, 0.25);
    animation-duration: 12s;
    animation-delay: 13s;
}
.about-banner li:nth-child(7){
    right: 77%;
    background: rgba(255, 255, 255, 0.35);
    animation-duration: 12s;
    animation-delay: 14s;
}
.about-banner li:nth-child(8){
    right: 85%;
    background: rgba(255, 255, 255, 0.15);
    animation-duration: 12s;
    animation-delay: 2s;
}
@keyframes square{
    0%{ transform: translateY(0);}
    100%{transform: translateY(-1000px)rotate(600deg);}
    

}
.workroom{
    width: 1200px;
    margin: 100px auto;
}
.workroom .title{ text-align: center;
                  margin-bottom: 60px; }
.workroom .title h1{font-size: 35px;
                    color: #333;}
.workroom .title p{font-size: 14px;
                   color: #818181;}
.workroom .left{ width: 540px;   }   
.workroom .left strong { font-size: 16px;
                         margin-bottom: 10px;}
.workroom .left .text { font-size: 14px;
                         color: #969696 ; 
                         margin-bottom: 15px;}
.yun {background: url(../img/076.jpg) repeat top center;
      padding: 100px 0;
      width: 100%;
      text-align: center;
     }

.yun  h1{font-size: 35px;color: #fff}
.yun-show{ width: 1230px; margin:  80px auto;}
.yun-show .ss{ width: 380px;
               height: 194px;
               background: #fff;
               float: left; }
.yun-show .ss h2{ margin: 50px auto 10px ;
                  width: 340px;
                 font-size: 16px;
                 color: #333;
                 }
.yun-show .ss p{ width: 340px; color: #999;margin: 0 auto;}
.know-more {text-align: center; margin:50px 0; }  
.know-more p{ font-size: 16px;
              color: #818181;
              margin-bottom: 20px;} 
.know-more a{ width: 118px; 
              height: 35px;
              line-height: 35px;
              display: inline-block;
              color: #fff;
              background: #3B9FF2;
              border:  #3B9FF2 solid 1px;}  
.know-more a:hover{ background: transparent;
                   color:#3B9FF2;
                   }                                         
.advantage{ width: 100%;
            color: #fff;
            padding-top: 100px;
            background: url(../img/079.jpg) repeat center  bottom;} 
.advantage .title{ text-align: center;
                   margin-bottom: 30px}             
.advantage .title  h1{ font-size: 35px;} 
.advantage-project  { width: 96%;
                      max-width: 1200px;
                      margin: 0 auto;}  
.advantage-project  .one{ width: 94%;
                          margin-bottom: 80px;
                         }
.advantage-project  .one img{ float: left;margin-right:15px;} 
.advantage-project  .one h2{ font-size: 16px;}
.advantage-project  .one p{font-size: 12px;
                            height: 40px;
                            line-height: 20px;
                            overflow: hidden;}
.process{ padding-top: 100px;
          background: #3BA1F2;}

                      





@media screen and (max-width:1199px)  {
.header{ width: 100%; height: 60px; overflow: hidden}
.header ul{ display: none;}
.header .mobileMenuBtn{ display:block}
.aside{ display: none; }  
.banner{ height: 600px;}
.banner .swiper-container{
    top:155px;
}   

.header ol.active{ 
    right: 0px;
    
}
.mobileMenuBtn:hover{cursor: pointer}
.mobileMenuBtn_shad.active{
     height:100%;
   }
 .header .mobileMenuBtn.active{
    right: 220px;
 }

}
@media screen and (max-width:960px) {
.product{  margin: 60px auto; } 
.product .title{ margin-bottom:30px ;} 
.product .title h1{ font-size: 25px;}
.youshi{ margin-top: 0;
        padding-top: 50px;
}
.caption{ margin-bottom: 20px;} 
.caption h1{ font-size: 25px;}
.market{ padding: 60px 0;}
.market .caption{ margin-bottom: 30px;}
.partner {    margin: 50px auto;}
.news { margin: 50px auto;}
.foot .one { display: none;}  

.foot .two{width: 100%;
          text-align: center;
         }
.foot .two ul{width:70%;margin: 0 auto}
.foot .two li{ float: left; margin-left: 10px; display: inline-block}
.foot .four{ margin-left: 20%;}
}
@media screen  and (max-width: 767px){
.banner .swiper-slide h1{font-size: 30px;}
.banner .swiper-container { top:180px;  }
.banner{ height: 500px; }
.banner .swiper-pagination-bullets{ bottom: 260px;}
.market .m3{   margin-bottom: 10px;}
.zxgg h1{ font-size: 30px;}
.news li{line-height: 35px;}
}
@media screen and (max-width:479px) {
.youshi .span4 .ee{ height: 75px;  width: 97%;}       
.youshi .span4 img {float: left;  
                    margin-right: 30px;
                    width: 50px;
                    height: 50px; }
.youshi .span4 h2{ font-size: 15px;}
.youshi .span4 p{ font-size: 12px;}   
.partner img{width:150px;height: 64.48px;}
.zxgg h1{ font-size: 25px;}
.zxgg p{font-size: 14px;}
.foot .three{text-align: center}
.foot .four{margin-left: 0}
}